<template>
  <!--大盒子-->
  <div id="tabset">
    <!--滚动组件开始-->
    <el-scrollbar ref="scroll" @mousewheel.native="scrolls"
      ><!--滚轮事件-->
      <!--标签开始-->
      <router-link
        @contextmenu.prevent.native="show(index, $event)"
        :to="item.index"
        class="tabs"
        :class="item.index == path ? 'buss' : ''"
        v-for="(item, index) in tablist"
        :key="item.title"
        tag="span"
      >
        <span>{{ $t(item.title) }}</span>
        <i class="el-icon-close" @click.prevent="handleClose(index)"></i>
      </router-link>
      <!--标签结束-->
    </el-scrollbar>
    <!--滚动组件结束-->

    <!--右键菜单栏开始-->
    <ul
      ref="dummydom"
      class="even_list"
      v-show="shows"
      :style="'top:' + top + 'px;  left:' + left + 'px;'"
    >
      <li @click="flush">刷新</li>
      <li @click.prevent="handleClose(remove)">关闭</li>
      <li @click="cancelelse">关闭其他</li>
      <li @click="closeall">关闭所有</li>
    </ul>
    <!--右键菜单栏结束-->
  </div>
</template>

<script>
export default {
  props: ["tablist"], //父传子的数组
  data() {
    return {
      path: "", //当前路由
      index: "", //路由
      shows: false, //右键列表隐藏
      remove: "", //点击右键当前下标
      left: "", //鼠标点击位置x轴
      top: "" //鼠标点击位置Y轴
    };
  },
  methods: {
    //标签页滚动条
    scrolls(e) {
      if (e.wheelDelta > 0) {
        //如果大于0的话就是向上滚动
        this.$refs.scroll.wrap.scrollLeft =
          this.$refs.scroll.wrap.scrollLeft + 30;
      }
      if (e.wheelDelta < 0) {
        //如果小于0的话就是向下滚动
        this.$refs.scroll.wrap.scrollLeft =
          this.$refs.scroll.wrap.scrollLeft - 30;
      }
    },
    //右键刷新
    flush() {
      this.$router.replace({
        path: "/Blank", //即将跳转的路径
        query: { path: this.tablist[this.remove].index } //传值 值为当前点击的路由
      });
      this.shows = false; //隐藏右键菜单栏
    },
    //右键删除其他
    cancelelse() {
      if (this.tablist.length <= 1) {
        //判断父组件传下的数组长度是否大于或等于0
        this.tablist.splice(1, this.tablist.length);
        this.shows = false;
      } else {
        //将数组清空然后在将当前点击的添加进去
        this.tablist.splice(0, this.tablist.length, this.tablist[this.remove]);
        this.$router.push(this.tablist[0].index); //跳转数组第一位的路由
        this.shows = false; //隐藏右键菜单栏
      }
    },
    //右键删除全部
    closeall() {
      if (this.tablist.length <= 1) {
        //判断数组长度是否小于或等于0
        this.tablist.splice(0, this.tablist.length); //清空数组
        this.shows = false;
      } else {
        this.tablist.splice(0, this.tablist.length); //清空数组
        this.$router.push("/homepag"); //跳转首页
        this.shows = false;
      }
    },
    //点击右键
    show(index, e) {
      this.remove = index; //把当前点击的下标赋值
      this.left = e.clientX; //点击的x轴
      this.top = e.clientY; //点击的y轴
      this.shows = true; //右键列表显示或者隐藏
    },
    //关闭标签后删除
    handleClose(index) {
      let tabItem = this.tablist.splice(index, 1)[0];
      let item = this.tablist[index]
        ? this.tablist[index]
        : this.tablist[index - 1];
      if (item) {
        tabItem.index === this.$route.fullPath && this.$router.push(item.index);
      } else {
        this.$router.push("/homepag");
      }
      this.shows = false;
    }
  },
  watch: {
    $route(to) {
      this.path = to.path;
    }
  },
  /*创建后 将我当前页面赋值给我要跳转的页面*/
  created() {
    this.path = this.$route.path;
  },
  mounted() {
    //点击其他东西关闭
    document.addEventListener(
      "mouseup",
      event => {
        var contextmenu = this.$refs.dummydom; //dummydom需要在上面用ref注册
        if (contextmenu) {
          if (!contextmenu.contains(event.target)) {
            this.shows = false;
          }
        }
      },
      false
    );
  }
};
</script>

<style>
/*滚动样式*/
.el-scrollbar__bar.is-horizontal {
  height: 0px !important;
}
#tabset {
  width: 100%;
}
.el-scrollbar/deep/.el-scrollbar__wrap {
  overflow: hidden;
  width: 100%;
}
.el-scrollbar {
  width: 100%;
  white-space: nowrap;
  height: 40px;
}
/*滚动样式结束*/

/*点击右键列表*/
.even_list {
  position: absolute;
  background: #fff;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  width: 80px;
  height: 120px;
  padding: 5px 0px;
  text-align: left;
  z-index: 2;
  border-radius: 4px;
  color: #333;
  list-style: none;
}
.even_list > li {
  width: 48px;
  height: 16px;
  padding: 7px 16px;
  font-size: 12px;
}
.even_list > li:hover {
  background: #eee;
  cursor: pointer;
}
/*点击右键列表结束*/

/*选项卡*/
.tabs {
  margin-left: 10px;
  background: rgba(255, 255, 255, 0.8);
  color: #495060;
  border: 1px solid #d8dce5;
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 35px;
  cursor: pointer;
}
.buss {
  background: #0badf9;
  color: #fff;
  line-height: 35px;
}
/*选项卡结束*/

/*选项卡删除小圆球样式*/
.tabs > i {
  line-height: 17px;
  font-size: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-left: 5px;
  transition: 0.5s;
  text-align: center;
}
.tabs > i:hover {
  width: 14px;
  height: 14px;
  transition: 0.4s;
  background: #f9470b;
  color: #fff;
  cursor: pointer;
}
/*选项卡删除小圆球样式结束*/
</style>
